<template>
  <view>
    <NavbarHead :toTop="false" titleColor="#ffffff" titleText="我的" bgColor="rgba(0,0,0,0)"></NavbarHead>
    <view class="topBox" :style="{ 'padding-top': topHeadHeight + 'rpx' }">
      <view class="userBox">
				<image class="userBox-picture" src="https://qiniu.suboshimuying.cn/assets/img/avatar.png" mode="" v-if="notLogin"></image>
        <image class="userBox-picture" :src="userInfo.avatar" mode="" v-else></image>
        <view class="userBox-userInfo">
          <view class="u-line-1" v-if="notLogin" @click="toUrl('/subPages/login/login')">
            点击登录
          </view>
					<view class="u-line-1" v-else>
					  {{ userInfo.nickname || '' }}
					</view>
          <view class="u-line-1" style="font-size: 24rpx; color: rgba(255, 255, 255, 0.7); margin-top: 10rpx">
            {{ userInfo.bio || '' }}
          </view>
        </view>
        <view class="userBox-right" @click="toUrl('/subPages/userInfo/userInfo')">
          <image src="http://qiniu.suboshimuying.cn/static/user/Frame@2x (2).png" mode=""></image>
          <text>修改</text>
        </view>
      </view>

      <view class="integral">
        <view class="integral-title">
          <view>
            <text>积分余额</text>
            <image src="http://qiniu.suboshimuying.cn/static/user/wenh.png" mode=""></image>
          </view>
          <view v-if="userInfo">分享人数:{{ userInfo.fenx_num || 0 }}</view>
        </view>
        <view class="integral-main">
          <view class="num">
            {{ userInfo.score || 0 }}
          </view>
          <view class="rightBtn">
            <text @click="toUrl('/subPages/integralList/integralList')">明细</text>
            <text class="btn" @click="toUrl(`/subPages/integralChange/integralChange?money=${userInfo.score}`)">提现</text>
          </view>
        </view>
      </view>
    </view>
    <view class="funBox">
      <view class="funBox-top">
        <view class="topItem" v-for="item in funBoxTopList" :key="item.name" @click="toUrl(item.url)">
          <image :src="item.iconUrl" mode=""></image>
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="topItem" @click="kefuClick">
          <image src="http://qiniu.suboshimuying.cn/static/user/fuke.png" mode=""></image>
          <view class="name">我的客服</view>
        </view>
      </view>

      <view class="imgBox">
        <image @click="toEnter" src="http://qiniu.suboshimuying.cn/static/user/Frame 3539@2x.png" mode=""></image>
        <image @click="toUrl('/subPages/share/share')" src="http://qiniu.suboshimuying.cn/static/user/Frame 3540@2x.png" mode=""></image>
      </view>
      <view class="listBox" @click="toUrl('/subPages/addressList/addressList?type=true')">
        <image class="icon" src="http://qiniu.suboshimuying.cn/static/user/Frame123.png" mode=""></image>
        <view class="name">我的地址</view>
        <image class="arrow" src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
      </view>

      <view class="listBox" @click="merchantLogin">
        <image class="icon" src="http://qiniu.suboshimuying.cn/static/user/Frame@2x (3).png" mode=""></image>
        <view class="name">商家登录</view>
        <image class="arrow" src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
      </view>

      <view class="listBox" @click="toUrl('/subPages/agreement/agreement?type=1')">
        <image class="icon" src="http://qiniu.suboshimuying.cn/static/user/Frame 3549@2x.png" mode=""></image>
        <view class="name">用户协议</view>
        <image class="arrow" src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
      </view>
      <view class="listBox" @click="toUrl('/subPages/agreement/agreement?type=2')">
        <image class="icon" src="http://qiniu.suboshimuying.cn/static/user/Frame@2x (4).png" mode=""></image>
        <view class="name">隐私协议</view>
        <image class="arrow" src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
import NavbarHead from '../../components/NavbarHead/NavbarHead.vue'
export default {
  data() {
    return {
      topHeadHeight: 172, //顶部导航栏高度
      userInfo: {}, // 用户信息
      // 订单类型:1=商品订单,2=服务订单,3=薅羊毛订单）
      funBoxTopList: [
        {
          name: '商品订单',
          iconUrl: 'http://qiniu.suboshimuying.cn/static/user/gouw.png',
          url: '/subPages/orderList/orderList?type=1'
        },
        {
          name: '服务订单',
          iconUrl: 'http://qiniu.suboshimuying.cn/static/user/liwu.png',
          url: '/subPages/orderList/orderList?type=2'
        },
        {
          name: '薅羊毛订单',
          iconUrl: 'http://qiniu.suboshimuying.cn/static/user/liwu.png',
          url: '/subPages/orderList/orderList?type=3'
        }
      ],
			notLogin: false
    }
  },
  components: {
    NavbarHead
  },
  onLoad() {
    // 计算顶部导航栏高度
    this.topHeadHeight = uni.getStorageSync('headHeight') * 2 || 172
  },
  onShow() {
		if(!uni.getStorageSync('token')){
			this.notLogin=true
			return
		}
		this.notLogin = false
    this.getuserinfo()
  },
  methods: {
    // 跳转
    toUrl(url) {
      uni.navigateTo({
        url
      })
    },
    // 商家登陆
    merchantLogin() {
      // 0没登陆过，1是之前登录过
      if (this.userInfo.is_login) {
        uni.navigateTo({
          url: '/subPages/merchant/merchant'
        })
      } else {
        uni.navigateTo({
          url: '/subPages/merchant/login'
        })
      }
    },
    // 客服点击
    async kefuClick() {
      let res = await this.$api.mykefu()
      uni.makePhoneCall({
        phoneNumber: res.data
      })
    },
    // 获取审核状态
    async toEnter() {
      let res = await this.$api.merchEnter()

      // 'status':'0=未入住，1=审核中,2=审核成功,3=审核失败'
      if (res.data.status === 0) {
        uni.navigateTo({
          url: `/subPages/enter/enter`
        })
      } else {
        uni.navigateTo({
          url: `/subPages/auditStatus/auditStatus?obj=${JSON.stringify(res.data)}`
        })
      }
      // console.log(res);
    },
    // 获取个人信息
    async getuserinfo() {
      let res = await this.$api.getuserinfo()
      this.userInfo = res.data
      console.log(res.data.avatar)
    }
  }
}
</script>
<style>
page {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
.topBox {
  background-image: url('http://qiniu.suboshimuying.cn/static/wecom-temp1.png');
  background-size: 100%;
}

.userBox {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-picture {
    margin: 0 20rpx 0 32rpx;
    width: 102rpx;
    height: 102rpx;
    border-radius: 50%;
    opacity: 1;
    border: 4rpx solid rgba(255, 255, 255, 1);
  }

  &-userInfo {
    flex: 1;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-weight: 500;
    text-align: left;
  }

  &-right {
    width: 144rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    border-radius: 100rpx 0 0 100rpx;
    opacity: 0.9;
    background: rgba(255, 255, 255, 1);
    color: $textColor;
    font-size: 24rpx;
    font-weight: 400;

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }
  }
}

.integral {
  box-sizing: border-box;
  padding: 32rpx;
  width: 686rpx;
  margin: 40rpx auto 0;
  border-radius: 30rpx 30rpx 0 0;
  background: rgba(255, 255, 255, 0.7);

  &-title {
    color: $textColor;
    font-size: 24rpx;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;

    image {
      width: 22rpx;
      height: 22rpx;
      margin-left: 5rpx;
      vertical-align: middle;
    }
  }

  &-main {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .num {
      color: rgba(0, 0, 0, 0.8);
      font-size: 52rpx;
      font-weight: 600;
    }

    .rightBtn {
      text {
        margin-right: 12rpx;
        display: inline-block;
        width: 96rpx;
        height: 48rpx;
        border-radius: 32rpx;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        color: $textColor;
        font-size: 24rpx;
        font-weight: 400;
        text-align: center;
        line-height: 48rpx;
      }

      .btn {
        background: radial-gradient(235.8% 163.9% at 132.1% 0%, rgba(255, 245, 252, 1) 0%, rgba(208, 132, 255, 1) 23%, rgba(121, 101, 255, 1) 56.99999999999999%, rgba(131, 111, 255, 1) 82%, rgba(130, 111, 255, 1) 100%);
        color: #ffffff;
      }
    }
  }
}

.funBox {
  box-sizing: border-box;
  padding: 42rpx 32rpx;
  z-index: 99;
  width: 100%;
  border-radius: 32rpx 32rpx 0 0;
  background: rgba(255, 255, 255, 1);
  margin-top: -20rpx;
}

.funBox-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .topItem {
    image {
      width: 96rpx;
      height: 96rpx;
      opacity: 1;
      border-radius: 50%;
      vertical-align: top;
    }

    .name {
      margin-top: 14rpx;
      color: rgba(0, 0, 0, 0.8);
      font-size: 24rpx;
      font-weight: 400;
    }
  }
}

.imgBox {
  margin: 42rpx auto 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  image {
    width: 334rpx;
    height: 178rpx;
    opacity: 1;
  }
}

.listBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;

  .name {
    flex: 1;
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    font-weight: 400;
  }

  .icon {
    margin-right: 16rpx;
    width: 36rpx;
    height: 36rpx;
  }

  .arrow {
    width: 16rpx;
    height: 32rpx;
  }
}
</style>
